<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script th:src="@{/qinjiang/js/echarts.min.js}"></script>
<link th:href="@{/qinjiang/css/mycss.css}" rel="stylesheet">

<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>

<!--        wifi弹出框-->
<div class="modal fade" id="modal-container-848509" role="dialog" aria-labelledby="conn_wifi"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="conn_wifi">
                    Wifi连接
                </h4>
            </div>
            <div class="modal-body">
                <form id="wifi-form" action="/connwifi" method="get" target="frameName">
                    <div class="form-group">
                        <label for="IPAddress">iP地址</label>
                        <input type="text" class="form-control" id="IPAddress" name="IPAddress"
                               value="192.168.4.2">
                    </div>
                    <div class="form-group">
                        <label for="wifiport">端口号</label>
                        <input type="text" class="form-control" id="wifiport" name="wifiport" value="6001">
                    </div>
                    <iframe src="" frameborder="0" name="frameName" hidden></iframe>
                </form>
            </div>
            <div class="modal-footer">
                <!--                        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-router" viewBox="0 0 16 16">-->
                <!--                            <path d="M5.525 3.025a3.5 3.5 0 0 1 4.95 0 .5.5 0 1 0 .707-.707 4.5 4.5 0 0 0-6.364 0 .5.5 0 0 0 .707.707Z"/>-->
                <!--                            <path d="M6.94 4.44a1.5 1.5 0 0 1 2.12 0 .5.5 0 0 0 .708-.708 2.5 2.5 0 0 0-3.536 0 .5.5 0 0 0 .707.707ZM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5-.5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Zm2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm1.5-.5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Zm2 0a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Z"/>-->
                <!--                            <path d="M2.974 2.342a.5.5 0 1 0-.948.316L3.806 8H1.5A1.5 1.5 0 0 0 0 9.5v2A1.5 1.5 0 0 0 1.5 13H2a.5.5 0 0 0 .5.5h2A.5.5 0 0 0 5 13h6a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5h.5a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 14.5 8h-2.306l1.78-5.342a.5.5 0 1 0-.948-.316L11.14 8H4.86L2.974 2.342ZM14.5 9a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h13Z"/>-->
                <!--                            <path d="M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z"/>-->
                <!--                        </svg>-->
                <i class="bi bi-router" style="margin-right: 30%" id="i-wifi">未连接</i>
                <button type="button" class="btn btn-primary" onclick="getwifi()">连接</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>

    </div>
</div>

<!--        串口就弹出框-->
<div class="modal fade" id="modal-container-430843" role="dialog" aria-labelledby="conn_serialport"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="conn_serialport" style="display: inline">
                    串口通信
                    <i class="bi bi-router" style="margin-left: 30%" id="i-serial">未连接</i>
                </h4>
            </div>
            <div class="modal-body">

                <div id="msgtext" data-spy="scroll" data-target="#navbar-example" data-offset="0"
                     style="height:200px;overflow:auto; position: relative;border:1px solid black">

                </div>
            </div>
            <div class="modal-footer">

                <form role="form" id="index-connSerial" action="/connSerial" method="post" target="frameName">
                    <label>串口 </label>
                    <div class="form-group">
                        <select class="form-control" id="getPort" name="serialPort">
                            <option>未查找到串口</option>
                        </select>
                    </div>

                    <div class="form-group" style="display: inline">
                        <lable>波特率</lable>
                        <select class="form-control"  name="baudrate" style="display: inline">
                            <option>115200</option>
                            <option>9600</option>
                            <option>19200</option>
                            <option>38400</option>
                            <option>57600</option>
                        </select>
                    </div>
                    <div class="form-check">
                        <label class="radio-inline">
                            <input type="radio" name="way" id="optionsRadios3" value="option1" checked>ASCII
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="way" id="optionsRadios4" value="option2">Hex
                        </label>
                    </div>
                    <iframe src="" frameborder="0" name="frameName" hidden></iframe>
                </form>
                <button id="connSerial_btn" type="button" class="btn btn-primary" onclick="connSerial()"  value="1" style="margin-right: 250px">打开串口</button>
                <!--                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>-->
            </div>

        </div>
    </div>
</div>

<!--标题-->
<div class="container" id="colum">
    <div class="head" th:fragment="headdiv">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <h3 class="text-center">
                    物联网智能家居
                </h3>
            </div>
        </div>
        <!--    导航-->
        <div class="row clearfix" style="margin-bottom: 10px">
            <div class="col-md-12 column">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a th:href="@{/index}" style="cursor:pointer">首页</a>
                    </li>
                    <li class="nav-item">
                        <a id="modal-848509" href="#modal-container-848509" role="button" class="btn"
                           data-toggle="modal" onclick="wifistatus()">
                            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
                                 class="bi bi-wifi" viewBox="0 0 16 16">
                                <path d="M15.384 6.115a.485.485 0 0 0-.047-.736A12.444 12.444 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c2.507 0 4.827.802 6.716 2.164.205.148.49.13.668-.049z"/>
                                <path d="M13.229 8.271a.482.482 0 0 0-.063-.745A9.455 9.455 0 0 0 8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065A8.46 8.46 0 0 1 8 7a8.46 8.46 0 0 1 4.576 1.336c.206.132.48.108.653-.065zm-2.183 2.183c.226-.226.185-.605-.1-.75A6.473 6.473 0 0 0 8 9c-1.06 0-2.062.254-2.946.704-.285.145-.326.524-.1.75l.015.015c.16.16.407.19.611.09A5.478 5.478 0 0 1 8 10c.868 0 1.69.201 2.42.56.203.1.45.07.61-.091l.016-.015zM9.06 12.44c.196-.196.198-.52-.04-.66A1.99 1.99 0 0 0 8 11.5a1.99 1.99 0 0 0-1.02.28c-.238.14-.236.464-.04.66l.706.706a.5.5 0 0 0 .707 0l.707-.707z"/>
                            </svg>
                        </a>
                    </li>
                    <li class="nav-item">

                        <a id="modal-430843" href="#modal-container-430843" role="button" class="btn"
                           data-toggle="modal">
                            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
                                 class="bi bi-usb-plug-fill" viewBox="0 0 16 16">
                                <path d="M6 .5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4H6v-4ZM7 1v1h1V1H7Zm2 0v1h1V1H9ZM5.5 5a.5.5 0 0 0-.5.5v4.894a2 2 0 0 0 .336 1.11l.83 1.245c.544.816.834 1.774.834 2.754 0 .275.222.497.497.497h2.006a.497.497 0 0 0 .497-.497c0-.98.29-1.938.834-2.754l.83-1.245a2 2 0 0 0 .336-1.11V5.5a.5.5 0 0 0-.5-.5h-6Z"/>
                            </svg>
                        </a>

                        <!--                        <a href="#">-->
                        <!--                            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-usb-plug-fill" viewBox="0 0 16 16">-->
                        <!--                                <path d="M6 .5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4H6v-4ZM7 1v1h1V1H7Zm2 0v1h1V1H9ZM5.5 5a.5.5 0 0 0-.5.5v4.894a2 2 0 0 0 .336 1.11l.83 1.245c.544.816.834 1.774.834 2.754 0 .275.222.497.497.497h2.006a.497.497 0 0 0 .497-.497c0-.98.29-1.938.834-2.754l.83-1.245a2 2 0 0 0 .336-1.11V5.5a.5.5 0 0 0-.5-.5h-6Z"/>-->
                        <!--                            </svg>-->
                        <!--                        </a>-->
                    </li>

                    <!--                已登录-->
                    <li class="dropdown pull-right" sec:authorize="isAuthenticated()">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                            <span class="glyphicon glyphicon-user"></span>
                            <!--获取用户名-->
                            <span th:text=${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}></span>
                            <strong class="caret"></strong></a>
                        <ul class="dropdown-menu" id="dropdownUI">
                            <li>
                                <!--                                <a href="javascript:void(0)" id="#btn_add">个人中心</a>-->
                                <!--                                <button type="button" class="btn btn-link" id="btn_add"-->
                                <!--                                        style="text-decoration: none;text-align: center; width: 100%; color: #0c4128">-->
                                <!--                                    个人中心-->
                                <!--                                </button>-->
                                <a type="button" class="btn btn-link" id="btn_add"
                                   style="text-decoration: none;text-align: center; width: 100%; color: #0c4128">
                                    个人中心
                                </a>
                            </li>
                            <li sec:authorize="hasRole('admin')">
                                <a th:href="@{/admin}">后台管理</a>
                            </li>
                            <li>
                                <a th:href="@{/logout}">退出登录</a>
                            </li>
                        </ul>
                    </li>

                    <!--               未登录-->
                    <li class="dropdown pull-right" sec:authorize="!isAuthenticated()">
                        <a th:href="@{/toLogin}">
                            登录
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!--    栏目-->
    <div class="row clearfix">
        <div sec:authorize="hasRole('vip1')">
            <div class="col-md-4 column">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            有害气体检测
                        </h3>
                    </div>
                    <!-- 表格-->
                    <div class="panel-body" style="padding: 0">
                        <!--  选项卡开始-->
                        <div class="col-md-12 column" style="padding: 1px">
                            <div class="tabbable" id="tabs-yh">
                                <ul class="nav nav-pills">
                                    <li class="active">
                                        <a href="#panel-yh1" data-toggle="tab">一号节点</a>
                                    </li>
                                    <li>
                                        <a href="#panel-yh2" data-toggle="tab">二号节点</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <!--  选项1-->
                                    <div class="tab-pane active" id="panel-yh1">
                                        <table class="table table-hover" style="margin-bottom: 0;">
                                            <!--                                            <caption style="width: 100%;text-align: center;font-weight: bold">一号节点</caption>-->
                                            <thead>
                                            <tr>
                                                <th>类型</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>气体浓度</td>
                                                <td id="yh-curNum1"></td>
                                                <td>
                                                    <a th:href="@{/yhline?id=1}" style="margin: 0">浓度曲线</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>剩余电量</td>
                                                <td id="yh-power1"></td>
                                                <td>
                                                    <a th:href="@{/yhpower?id=1}" style="margin: 0">电量曲线</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>阈值</td>
                                                <td>
                                                    <input id="yh-max1" type="text" style="width: 40px;height: 25px"
                                                           value="020"/>
                                                    <label>%</label>
                                                </td>
                                                <td style="padding-top:5px">
                                                    <input id="yhmax-btn1" type="button"
                                                           class="btn btn-info btn-block btn-sm"
                                                           style="width:45%;height:30px;display: inline;"
                                                           onclick="yhcmdmax(1)"
                                                           value="开"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>换气扇</td>
                                                <td id="yh-status1"></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>报警状态</td>
                                                <td id="yh-numWarm1"></td>
                                                <td id="yh-powerWarm1"></td>
                                            </tr>
                                            </tbody>
                                        </table>

                                        <div class="panel-body" style="padding: 5px">
                                            <button type="button" class="btn btn-info btn-block"
                                                    style="width:45%;display: inline;margin-left: 10px"
                                                    onclick="YHstatus(1,1)">启动换气
                                            </button>
                                            <button type="button" class="btn btn-info btn-block"
                                                    style="width:45%;display: inline;margin-left:10px;margin-top: 0"
                                                    onclick="YHstatus(0,1)">
                                                关闭换气
                                            </button>
                                        </div>
                                    </div>

                                    <!--  选项 2  -->
                                    <div class="tab-pane" id="panel-yh2">

                                        <table class="table table-hover" style="margin-bottom: 0;">
                                            <!--                                            <caption style="width: 100%;text-align: center;font-weight: bold">二号节点</caption>-->
                                            <thead>
                                            <tr>
                                                <th>类型</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>气体浓度</td>
                                                <td id="yh-curNum2"></td>
                                                <td>
                                                    <a th:href="@{/yhline?id=2}" style="margin: 0">浓度曲线</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>剩余电量</td>
                                                <td id="yh-power2"></td>
                                                <td>
                                                    <a th:href="@{/yhpower?id=2}" style="margin: 0">电量曲线</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>阈值</td>
                                                <td>
                                                    <input id="yh-max2" type="text" style="width: 40px;height: 25px"
                                                           value="020"/>
                                                    <label>%</label>
                                                </td>
                                                <td style="padding-top:5px">
                                                    <input id="yhmax-btn2" type="button"
                                                           class="btn btn-info btn-block btn-sm"
                                                           style="width:45%;height:30px;display: inline;"
                                                           onclick="yhcmdmax(2)"
                                                           value="开"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>换气扇</td>
                                                <td id="yh-status2"></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>报警状态</td>
                                                <td id="yh-numWarm2"></td>
                                                <td id="yh-powerWarm2"></td>
                                            </tr>
                                            </tbody>
                                        </table>

                                        <div class="panel-body" style="padding: 5px">
                                            <button type="button" class="btn btn-info btn-block"
                                                    style="width:45%;display: inline;margin-left: 10px"
                                                    onclick="YHstatus(1,2)">启动换气
                                            </button>
                                            <button type="button" class="btn btn-info btn-block"
                                                    style="width:45%;display: inline;margin-left:10px;margin-top: 0"
                                                    onclick="YHstatus(0,2)">
                                                关闭换气
                                            </button>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>

        <div sec:authorize="hasRole('vip2')">
            <div class="col-md-4 column">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            光照度检测
                        </h3>
                    </div>

                    <div class="panel-body" style="padding: 0">
                        <div class="col-md-12 column" style="padding: 1px">
                            <div class="tabbable" id="tabs-900188">
                                <ul class="nav nav-pills">
                                    <li class="active">
                                        <a href="#panel-918428" data-toggle="tab">一号节点</a>
                                    </li>
                                    <li>
                                        <a href="#panel-76169" data-toggle="tab">二号节点</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <!--  选项1-->
                                    <div class="tab-pane active" id="panel-918428">

                                        <table class="table table-hover" style="margin-bottom: 0;">
                                            <!--                                            <caption style="width: 100%;text-align: center;font-weight: bold">一号节点</caption>-->
                                            <thead>
                                            <tr>
                                                <th>类型</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>光照度</td>
                                                <td id="gz-curNum1"></td>
                                                <td>
                                                    <a th:href="@{/gzline?id=1}" style="margin: 0">浓度曲线</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>剩余电量</td>
                                                <td id="gz-power1"></td>
                                                <td>
                                                    <a th:href="@{/gzpower?id=1}" style="margin: 0">电量曲线</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>阈值</td>
                                                <td>
                                                    <input id="gz-max1" type="text" style="width: 40px;height: 25px"
                                                           value="020"/>
                                                    <label>%</label>
                                                </td>
                                                <td style="padding-top:5px">
                                                    <input id="gzmax-btn1" type="button"
                                                           class="btn btn-info btn-block btn-sm"
                                                           style="width:45%;height:30px;display: inline;"
                                                           onclick="gzcmdmax(1)"
                                                           value="开"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>换气扇</td>
                                                <td id="gz-status1"></td>
                                                <td></td>
                                            </tr>
                                            </tbody>
                                        </table>

                                        <div class="panel-body" style="padding: 5px">
                                            <button type="button" class="btn btn-info btn-block"
                                                    style="width:45%;display: inline;margin-left: 10px"
                                                    onclick="GZstatus(1,1)">启动换气
                                            </button>
                                            <button type="button" class="btn btn-info btn-block"
                                                    style="width:45%;display: inline;margin-left:10px;margin-top: 0"
                                                    onclick="GZstatus(0,1)">
                                                关闭换气
                                            </button>
                                        </div>

                                    </div>

                                    <!--  选项 2  -->
                                    <div class="tab-pane" id="panel-76169">

                                        <table class="table table-hover" style="margin-bottom: 0;">
                                            <!--                                            <caption style="width: 100%;text-align: center;font-weight: bold">二号节点</caption>-->
                                            <thead>
                                            <tr>
                                                <th>类型</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>光照度</td>
                                                <td id="gz-curNum2"></td>
                                                <td>
                                                    <a th:href="@{/gzline?id=2}" style="margin: 0">浓度曲线</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>剩余电量</td>
                                                <td id="gz-power2"></td>
                                                <td>
                                                    <a th:href="@{/gzpower?id=2}" style="margin: 0">电量曲线</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>阈值</td>
                                                <td>
                                                    <input id="gz-max2" type="text" style="width: 40px;height: 25px"
                                                           value="020"/>
                                                    <label>%</label>
                                                </td>
                                                <td style="padding-top:5px">
                                                    <input id="gzmax-btn2" type="button"
                                                           class="btn btn-info btn-block btn-sm"
                                                           style="width:45%;height:30px;display: inline;"
                                                           onclick="gzcmdmax(2)"
                                                           value="开"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>换气扇</td>
                                                <td id="gz-status2"></td>
                                                <td></td>
                                            </tr>
                                            </tbody>
                                        </table>

                                        <div class="panel-body" style="padding: 5px">
                                            <button type="button" class="btn btn-info btn-block"
                                                    style="width:45%;display: inline;margin-left: 10px"
                                                    onclick="GZstatus(1,2)">启动换气
                                            </button>
                                            <button type="button" class="btn btn-info btn-block"
                                                    style="width:45%;display: inline;margin-left:10px;margin-top: 0"
                                                    onclick="GZstatus(0,2)">
                                                关闭换气
                                            </button>
                                        </div>


                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!--                    <div class="panel-body">-->
                    <!--                        节点状态：-->
                    <!--                    </div>-->
                    <!--                    <div class="panel-body">-->
                    <!--                            剩余电量：-->
                    <!--                    </div>-->
                    <!--                    <div id="main" style="width: 100%;height:400%;"></div>-->
                </div>
            </div>
        </div>

        <div sec:authorize="hasRole('vip3')">
            <div class="col-md-4 column">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            厨房燃气检测
                        </h3>
                    </div>

                    <div class="panel-body" style="padding: 0">
                        <!--  选项卡开始-->
                        <div class="col-md-12 column" style="padding: 1px">
                            <div class="tabbable" id="tabs-cf">
                                <ul class="nav nav-pills">
                                    <li class="active">
                                        <a href="#panel-cf1" data-toggle="tab">一号节点</a>
                                    </li>
                                    <li>
                                        <a href="#panel-cf2" data-toggle="tab">二号节点</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <!--  选项1-->
                                    <div class="tab-pane active" id="panel-cf1">
                                        <table class="table table-hover" style="margin-bottom: 0;">
                                            <!--                                            <caption style="width: 100%;text-align: center;font-weight: bold">一号节点</caption>-->
                                            <thead>
                                            <tr>
                                                <th>类型</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>燃气浓度</td>
                                                <td id="cf-curNum1"></td>
                                                <td>
                                                    <a th:href="@{/cfline?id=1}" style="margin: 0">浓度曲线</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>剩余电量</td>
                                                <td id="cf-power1"></td>
                                                <td>
                                                    <a th:href="@{/cfpower?id=1}" style="margin: 0">电量曲线</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>阈值</td>
                                                <td>
                                                    <input id="cf-max1" type="text" style="width: 40px;height: 25px"
                                                           value="020"/>
                                                    <label>%</label>
                                                </td>
                                                <td style="padding-top:5px">
                                                    <input id="cfmax-btn1" type="button"
                                                           class="btn btn-info btn-block btn-sm"
                                                           style="width:45%;height:30px;display: inline;"
                                                           onclick="cfcmdmax(1)"
                                                           value="开"></input>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>换气扇</td>
                                                <td id="cf-status1"></td>
                                                <td></td>
                                            </tr>
                                            </tbody>
                                        </table>

                                        <div class="panel-body" style="padding: 5px">
                                            <button type="button" class="btn btn-info btn-block"
                                                    style="width:45%;display: inline;margin-left: 10px"
                                                    onclick="CFstatus(1,1)">启动换气
                                            </button>
                                            <button type="button" class="btn btn-info btn-block"
                                                    style="width:45%;display: inline;margin-left:10px;margin-top: 0"
                                                    onclick="CFstatus(0,1)">
                                                关闭换气
                                            </button>
                                        </div>
                                    </div>

                                    <!--  选项 2  -->
                                    <div class="tab-pane" id="panel-cf2">

                                        <table class="table table-hover" style="margin-bottom: 0;">
                                            <!--                                            <caption style="width: 100%;text-align: center;font-weight: bold">二号节点</caption>-->
                                            <thead>
                                            <tr>
                                                <th>类型</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>燃气浓度</td>
                                                <td id="cf-curNum2"></td>
                                                <td>
                                                    <a th:href="@{/cfline?id=2}" style="margin: 0">浓度曲线</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>剩余电量</td>
                                                <td id="cf-power2"></td>
                                                <td>
                                                    <a th:href="@{/cfpower?id=2}" style="margin: 0">电量曲线</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>阈值</td>
                                                <td>
                                                    <input id="cf-max2" type="text" style="width: 40px;height: 25px"
                                                           value="020"/>
                                                    <label>%</label>
                                                </td>
                                                <td style="padding-top:5px">
                                                    <input id="cfmax-btn2" type="button"
                                                           class="btn btn-info btn-block btn-sm"
                                                           style="width:45%;height:30px;display: inline;"
                                                           onclick="cfcmdmax(2)"
                                                           value="开"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>换气扇</td>
                                                <td id="cf-status2"></td>
                                                <td></td>
                                            </tr>
                                            </tbody>
                                        </table>

                                        <div class="panel-body" style="padding: 5px">
                                            <button type="button" class="btn btn-info btn-block"
                                                    style="width:45%;display: inline;margin-left: 10px"
                                                    onclick="CFstatus(1,2)">启动换气
                                            </button>
                                            <button type="button" class="btn btn-info btn-block"
                                                    style="width:45%;display: inline;margin-left:10px;margin-top: 0"
                                                    onclick="CFstatus(0,2)">
                                                关闭换气
                                            </button>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>


                    <!--                    <div class="panel-body">-->
                    <!--                        Panel content-->
                    <!--                    </div>-->
                    <!--                    <div class="panel-footer">-->
                    <!--                        Panel footer-->
                    <!--                    </div>-->
                </div>
            </div>
        </div>
    </div>

    <div class="row clearfix">
        <div sec:authorize="hasRole('vip4')">
            <div class="col-md-4 column">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            红外入侵检测
                        </h3>
                    </div>

                    <div class="panel-body" style="padding: 0">
                        <!--  选项卡开始-->
                        <div class="col-md-12 column" style="padding: 1px">
                            <div class="tabbable" id="tabs-hw">
                                <ul class="nav nav-pills">
                                    <li class="active">
                                        <a href="#panel-hw1" data-toggle="tab">一号节点</a>
                                    </li>
                                    <li>
                                        <a href="#panel-hw2" data-toggle="tab">二号节点</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <!--  选项1-->
                                    <div class="tab-pane active" id="panel-hw1">
                                        <!-- 表格-->
                                        <table class="table table-hover">
                                            <thead>
                                            <tr>
                                                <th>类型</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>状态</td>
                                                <td id="hw-status1"></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>剩余电量</td>
                                                <td id="hw-power1"></td>
                                                <td>
                                                    <a th:href="@{/hwpower?id=1}" style="margin: 0">电量曲线</a>
                                                </td>
                                            </tr>

                                            </tbody>
                                        </table>
                                    </div>

                                    <!--  选项 2  -->
                                    <div class="tab-pane" id="panel-hw2">
                                        <table class="table table-hover">
                                            <thead>
                                            <tr>
                                                <th>类型</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>状态</td>
                                                <td id="hw-status2"></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>剩余电量</td>
                                                <td id="hw-power2"></td>
                                                <td>
                                                    <a th:href="@{/hwpower?id=2}" style="margin: 0">电量曲线</a>
                                                </td>
                                            </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div sec:authorize="hasRole('vip5')">
            <div class="col-md-4 column">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            RFID门禁
                        </h3>
                    </div>

                    <div class="panel-body" style="padding: 0">
                        <div class="col-md-12 column" style="padding: 1px">
                            <div class="tabbable" id="tabs-rf">
                                <ul class="nav nav-pills">
                                    <li class="active">
                                        <a href="#panel-rf01" data-toggle="tab">一号节点</a>
                                    </li>
                                    <li>
                                        <a href="#panel-rf02" data-toggle="tab">二号节点</a>
                                    </li>
                                </ul>
                                <div class="tab-content">

                                    <div class="tab-content">
                                        <!--  选项1-->
                                        <div class="tab-pane active" id="panel-rf01">
                                            <!-- 表格-->
                                            <table class="table table-hover">
                                                <thead>
                                                <tr>
                                                    <th>类型</th>
                                                    <th>状态</th>
                                                    <th>操作</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <td>卡号</td>
                                                    <td id="rf-curNum1"></td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td>状态</td>
                                                    <td id="rf-status1"></td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td>剩余电量</td>
                                                    <td id="rf-power1"></td>
                                                    <td>
                                                        <a th:href="@{/rfpower?id=1}" style="margin: 0">电量曲线</a>
                                                    </td>
                                                </tr>

                                                </tbody>
                                            </table>
                                        </div>

                                        <!--  选项 2  -->
                                        <div class="tab-pane" id="panel-rf02">
                                            <table class="table table-hover">
                                                <thead>
                                                <tr>
                                                    <th>类型</th>
                                                    <th>状态</th>
                                                    <th>操作</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <td>卡号</td>
                                                    <td id="rf-curNum2"></td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td>状态</td>
                                                    <td id="rf-status2"></td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td>剩余电量</td>
                                                    <td id="rf-power2"></td>
                                                    <td>
                                                        <a th:href="@{/rfpower?id=2}" style="margin: 0">电量曲线</a>
                                                    </td>
                                                </tr>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <!--                    <div class="panel-body">-->
                <!--                        Panel content-->
                <!--                    </div>-->
                <!--                    <div class="panel-footer">-->
                <!--                        Panel footer-->
                <!--                    </div>-->
            </div>
        </div>
    </div>

    <div sec:authorize="hasRole('vip6')">
        <div class="col-md-4 column">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel title
                    </h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
                <div class="panel-footer">
                    Panel footer
                </div>
            </div>
        </div>
    </div>
</div>

<!--                                    <p>-->
<!--                                        I'm in Section 1.-->
<!--                                    </p>-->


<!--    <div class="row clearfix">-->
<!--        <div class="col-md-12 column">-->
<!--        </div>-->
<!--    </div>-->
</div>


<!--个人中心弹出框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     style="margin-top: 100px" th:fragment="personal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel" style="text-align: center">个人中心</h4>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="txt_departmentname">用户名</label>
                    <input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname"
                           placeholder="用户名">
                </div>
                <div class="form-group">
                    <label for="txt_parentdepartment">密码</label>
                    <input type="text" name="txt_parentdepartment" class="form-control" id="txt_parentdepartment"
                           placeholder="密码">
                </div>

                <div class="form-group">
                    <label>权限</label>
                    <input type="text" name="txt_departmentlevel" class="form-control" id="txt_departmentlevel"
                           placeholder="用户权限" disabled="disabled">
                </div>

                <div class="form-group" style="display: none">
                    <label for="txt_statu">id</label>
                    <input type="text" name="txt_statu" class="form-control" id="txt_statu" placeholder="id">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span
                        class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                </button>
                <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span
                        class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
                </button>
            </div>
        </div>
    </div>
</div>
</body>
<script th:src="@{/qinjiang/js/index_cf.js}"></script>
<script th:src="@{/qinjiang/js/index_yh.js}"></script>
<script th:src="@{/qinjiang/js/index_gz.js}"></script>
<script type="text/javascript">
    $("#btn_add").click(function () {
        $('#myModal').modal();  //弹出
        $.getJSON("/getUser", function (user) {
            $("#txt_statu").val(user.id);
            $("#txt_departmentname").val(user.name);
            $("#txt_parentdepartment").val(user.password);
            $("#txt_departmentlevel").val(user.role);
        });
    });

    //保存按钮
    $("#btn_submit").click(function () {
        id = $("#txt_statu").val();
        name = $("#txt_departmentname").val();
        password = $("#txt_parentdepartment").val();
        role = $("#txt_departmentlevel").val();
        $.getJSON("/updateUser", {id: id, name: name, password: password, role: role}, function (status) {
            if (!status) {
                alert("失败")
            } else {
                doList();
            }
        })
    });


    $(function () {
        findPort();
    });

    //查找串口
    function findPort() {
        $.getJSON("/findPorts", function (list) {
            var obj = $("#getPort")
            obj.empty();
            for (let i = 0; i < list.length; i++) {
                obj.append("<option value='" + list[i] + "'>" + list[i] + "</option>>");
            }
        });
    }

    //连接串口
    var btn = $("#connSerial_btn");
    function connSerial() {
        if (btn.val() =="1"){
           $("#index-connSerial").submit();
            btn.html("关闭串口");
            btn.val("0");
        }else {
            btn.html("打开串口");
            $.getJSON("/closePort",function (stayus){
                if (stayus){
                    btn.val("1");
                }
            });
        }

    }


    //连接wifi
    function getwifi() {
        $("#wifi-form").submit();
        wifistatus();
    }

    //获取WiFi链接状态
    function wifistatus() {
        $.getJSON("/getwifiStatus", function (status) {
            if (status) {
                $("#i-wifi").text("已连接").css({"color": "red"});
            } else {
                $("#i-wifi").text("未连接").css({"color": "black"});
            }
        })
    }


    //定时获取数据
    setInterval(function () {

        //获取串口状态
            $.getJSON("/getserialStatus", function (status) {

                if (status) {
                    $("#i-serial").text("已连接").css({"color": "red"});
                    btn.html("关闭串口");
                    btn.val("0");
                } else {
                    $("#i-serial").text("未连接").css({"color": "black"});
                    btn.html("打开串口");
                    btn.val("1");
                }
            });

        //获取串口数据
        $.ajax({
            url: '/getserialMsg',
            type: 'get',
            success: function (msg) {
                if (msg != null)
                    //alert(msg)
                    for (var i = 0; i < msg.length; i++) {
                        $("#msgtext").append(msg + "</br>");
                    }
            }
        })

        //厨房燃气
        $.getJSON("/getCF", {"id": "1"}, function (cf) {
            var status;
            if (cf.status == 1) {
                status = "开";
            } else {
                status = "关";
            }
            if (cf.curNum != "") {
                $("#cf-curNum1").text(cf.curNum + " %");
            }
            if (cf.status != "") {
                $("#cf-status1").text(status);
            }
            if (cf.power != "") {
                $("#cf-power1").text(cf.power + " mv");
            }
            // $("#cf-max").text(cf.max +" %");
        });

        $.getJSON("/getCF", {"id": "2"}, function (cf) {
            var status;
            if (cf.status == 1) {
                status = "开";
            } else {
                status = "关";
            }
            if (cf.curNum != "") {
                $("#cf-curNum2").text(cf.curNum + " %");
            }
            if (cf.status != "") {
                $("#cf-status2").text(status);
            }
            if (cf.power != "") {
                $("#cf-power2").text(cf.power + " mv");
            }
            // $("#cf-max").text(cf.max +" %");
        });

        //有害气体
        $.getJSON("/getYH", {"id": "1"}, function (yh) {
            var status;
            if (yh.status == 1) {
                status = "开";
            } else {
                status = "关";
            }
            if (yh.curNum != "") {
                $("#yh-curNum1").text(yh.curNum + " %");
            }
            if (yh.status != "") {
                $("#yh-status1").text(status);
            }
            if (yh.power != "") {
                $("#yh-power1").text(yh.power + " mv");
            }
            if (yh.numWarm != "" && yh.numWarm == "1") {
                $("#yh-numWarm1").text("浓度过高").css({"color": "red"});
            } else if (yh.numWarm != "" && yh.numWarm == "0") {
                $("#yh-numWarm1").text("无").css({"color": "black"});
            }
            if (yh.powerWarm != "" && yh.powerWarm == "1") {
                $("#yh-powerWarm1").text("电量过低").css({"color": "red"});
            } else if (yh.powerWarm != "" && yh.powerWarm == "0") {
                $("#yh-powerWarm1").text("无").css({"color": "black"});
            }
            // $("#yh-max").text(yh.max +" %");
        });

        $.getJSON("/getYH", {"id": "2"}, function (yh) {
            var status;
            if (yh.status == 1) {
                status = "开";
            } else {
                status = "关";
            }
            if (yh.curNum != "") {
                $("#yh-curNum2").text(yh.curNum + " %");
            }
            if (yh.status != "") {
                $("#yh-status2").text(status);
            }
            if (yh.power != "") {
                $("#yh-power2").text(yh.power + " mv");
            }
            if (yh.numWarm != "" && yh.numWarm == "1") {
                $("#yh-numWarm2").text("警告！浓度过高").css({"color": "red"});
            } else {
                $("#yh-numWarm2").text("").css({"color": "black"});
                ;
            }
            if (yh.powerWarm != "" && yh.powerWarm == "1") {
                $("#yh-powerWarm2").text("警告！电量过低").css({"color": "red"});
            } else {
                $("#yh-powerWarm2").text("").css({"color": "black"});
                ;
            }
            // $("#yh-max").text(yh.max +" %");
        });

        //光照度
        $.getJSON("/getGZ", {"id": "1"}, function (gz) {
            var status;
            if (gz.status == 1) {
                status = "开";
            } else {
                status = "关";
            }
            if (gz.curNum != "") {
                $("#gz-curNum1").text(gz.curNum + " %");
            }
            if (gz.status != "") {
                $("#gz-status1").text(status);
            }
            if (gz.power != "") {
                $("#gz-power1").text(gz.power + " mv");
            }
            // $("#gz-max").text(gz.max +" %");
        });

        $.getJSON("/getGZ", {"id": "2"}, function (gz) {
            var status;
            if (gz.status == 1) {
                status = "开";
            } else {
                status = "关";
            }
            if (gz.curNum != "") {
                $("#gz-curNum2").text(gz.curNum + " %");
            }
            if (gz.status != "") {
                $("#gz-status2").text(status);
            }
            if (gz.power != "") {
                $("#gz-power2").text(gz.power + " mv");
            }
            // $("#gz-max").text(gz.max +" %");
        });

        //红外检测
        $.getJSON("/getHWJC", {"id": "1"}, function (hw) {
            var status;
            if (hw.status == 0) {
                status = "有人入侵";
            } else {
                status = "正常";
            }
            if (hw.status != "") {
                if (status == "正常") {
                    $("#hw-status1").text(status).css({"color": "black"});
                } else {
                    $("#hw-status1").text(status).css({"color": "red"});
                }
            }
            if (hw.power != "") {
                $("#hw-power1").text(hw.power + " mv");
            }
            // $("#hw-max").text(hw.max +" %");
        });

        $.getJSON("/getHWJC", {"id": "2"}, function (hw) {
            var status;
            if (hw.status == 1) {
                status = "有人入侵";
            } else {
                status = "正常";
            }
            if (hw.status != "") {
                $("#hw-status2").text(status);
            }
            if (hw.power != "") {
                $("#hw-power2").text(hw.power + " mv");
            }
            // $("#hw-max").text(hw.max +" %");
        });

        //RFID
        $.getJSON("/getRF", {"id": "1"}, function (rf) {
            var status;
            if (rf.status == 1) {
                status = "开";
            } else {
                status = "关";
            }
            if (rf.curNum != "") {
                $("#rf-curNum1").text(rf.curNum);
            }
            if (rf.status != "") {
                $("#rf-status1").text(status);
            }
            if (rf.power != "") {
                $("#rf-power1").text(rf.power + " mv");
            }
            // $("#rf-max").text(rf.max +" %");
        });

        $.getJSON("/getRF", {"id": "2"}, function (rf) {
            var status;
            if (rf.status == 1) {
                status = "开";
            } else {
                status = "关";
            }
            if (rf.curNum != "") {
                $("#rf-curNum2").text(rf.curNum);
            }
            if (rf.status != "") {
                $("#rf-status2").text(status);
            }
            if (rf.power != "") {
                $("#rf-power2").text(rf.power + " mv");
            }
            // $("#rf-max").text(rf.max +" %");
        });

    }, 1000);

</script>
</html>